<script type="text/javascript">
$(document).ready(function() {
	$("#btn_encode").click(function() {

		switch($('input:radio[name=radio_encode]:checked').val()){
		case "option1":
			var encoded_text = urlencode($.trim($("#txt_encode").val()));
		  break;
		case "option2":
			var encoded_text = rawurlencode($.trim($("#txt_encode").val()));
		  break;
		case "option3":
			var encoded_text = base64_encode($.trim($("#txt_encode").val()));
		  break;
		default:
		  	var encoded_text = urlencode($.trim($("#txt_encode").val()));
		}

	  	$("#txt_decode").val(encoded_text);
	});

	$("#btn_decode").click(function() {

		switch($('input:radio[name=radio_decode]:checked').val()){
		case "option1":
			var encoded_text = urldecode($.trim($("#txt_decode").val()));
		  break;
		case "option2":
			var encoded_text = rawurldecode($.trim($("#txt_decode").val()));
		  break;
		case "option3":
			var encoded_text = base64_decode($.trim($("#txt_decode").val()));
		  break;
		default:
		  	var encoded_text = urldecode($.trim($("#txt_decode").val()));
		}

	  	$("#txt_encode").val(encoded_text);
	});
});
</script>
<div class="hero-unit">
  <legend>URL Encode / Decode</legend>	
  <fieldset class="en_decode">
    <label>
    	URL Encode
    </label>
    <label>
    	<textarea id="txt_encode"  name="txt_encode" rows="10" placeholder="Input url.."></textarea>
    </label>
	<label>
		<label class="radio  inline">
		<input type="radio" name="radio_encode" value="option1" checked> urlencode
		</label>
		<label class="radio  inline">
		<input type="radio" name="radio_encode" value="option2"> rawurlencode
		</label>
		<label class="radio  inline">
		<input type="radio" name="radio_encode" value="option3"> base64_encode
	 	</label>	
	</label>
    <label>
      <button type="button" class="btn" id="btn_encode" name="btn_encode">Encode</button>
    </label>
  </fieldset>

  <fieldset class="en_decode">
    <label>
    	URL Decode
    </label>
    <label>
    	<textarea id="txt_decode"  name="txt_decode" rows="10" placeholder="Input url.."></textarea>
    </label>
    <label>
		<label class="radio  inline">
		<input type="radio" name="radio_decode" value="option1" checked> urldecode
		</label>
		<label class="radio  inline">
		<input type="radio" name="radio_decode" value="option2"> rawurldecode
		</label>
		<label class="radio  inline">
		<input type="radio" name="radio_decode" value="option3"> base64_decode
	 	</label>	
	</label>
    <label>
      <button type="button" class="btn" id="btn_decode" name="btn_decode" >Decode</button>
    </label>
  </fieldset>
</div>